<template>
  <section class="hero-section" ref="heroSection">
    <swiper
      :modules="[Pagination, Autoplay]"
      :slides-per-view="1"
      :space-between="0"
      :pagination="{ clickable: true }"
      :autoplay="{
        delay: 2500,
        disableOnInteraction: false,
      }"
      loop
      effect="fade"
    >
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner01.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner02.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner03.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner04.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner05.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner06.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner07.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="hero-bg" src="@/assets/image/index/banner08.png"
      /></swiper-slide>
    </swiper>
  </section>
</template>
<script setup lang="ts">
import { Autoplay, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/css'
import 'swiper/css/pagination'
</script>

<style lang="scss" scoped>
:deep(.swiper-pagination-bullet) {
  width: 40px;
  height: 5px;
  border-radius: 0;
  opacity: 0.2;
}

:deep(.swiper-pagination-bullet-active) {
  opacity: 1;
  background: #0975ee;
}

.hero-bg {
  max-height: 600px;
}
</style>
